<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .item-box {
            border: 1px solid #ccc;
            margin: 5px;
            padding: 5px;

        }
        #app{
            max-width: 80%;
            margin:0 auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <p>username 用户名</p>
            <p>password 密码</p>
            <p>ip: 为设备IP</p>
            <p>port: 端口号默认为554</p>
            <p>channel 通道号</p>
            <p>subtype: 码流类型 一般用子码流</p>
        </div>
        <input type="text"  v-model="inputval">
        <select  v-model="selectitem">

            <option value="">请选择摄像头格式</option>
            <option v-for="item in selectarr" :value="item.key" :key="item.key">{{item.value}}</option>

        </select>
        <ul>
            <li v-for="(item,index) in selectdata" :key="item.id">
                <div class="item-box">
                    
                    <div>{{index+1  +'  '}}{{item.title}}({{selectarr[item.status-1].value}})</div>
                    <div v-if="item.rtspUri">{{item.rtspUri}}</div>
                    <div v-if="item.info&&item.info.length">
                        <div v-for="iteminfo in item.info">
                            {{iteminfo}}
                        </div>
                    </div>
                    <div v-if="item.infotext">{{item.infotext}}</div>
                </div>

            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>

    <script>

        var sxtarr = [{
            "id": 1,
            "title": "海康",
            "rtspUri": "rtsp://{username}:{password}@{ip}:{port}/{videotype}/ch{channel}/sub/av_stream",
            info: [
                'rtsp://admin:12345@192.168.1.64:554/ch1/sub/av_stream',
                'rtsp://admin:password@192.168.1.33:554/h265/ch1/sub/av_stream'
            ],
            "status": 1,
            infotext:'videotype 默认为h265  可写 可不写',
        }, {
            "id": 3,
            "title": "大华",
            "rtspUri": "rtsp://{username}:{password}@{ip}:{port}/cam/realmonitor?channel={number}&subtype={subtype}",
            info:['rtsp://admin:admin@10.12.4.84:554/cam/realmonitor?channel=2&subtype=1'],
            "status": 1,
            infotext:''
        }, {
            "id": 4,
            "title": "华为",
            "rtspUri": "rtsp://{username}:{password}@{ip}/LiveMedia/ch{number}/{subtype}",
            "status": 1
        }, {
            "id": 8,
            "title": "宇视",
            "rtspUri": "rtsp://{username}:{password}@{ip}:{port}/media/{subtype}/multicast{number}",
            info:['tsp://admin:Admin*123@192.168.1.13:554/media/video'],
            "status": 1
        }, {
            "id": 12,
            "title": "海康1",
            "rtspUri": "rtsp://admin:Ycgl123456@10.20.152.59:554/Streaming/Channels/102",
            "status": 2
        },
        {
            "id": 13,
            "title": "英飞拓",
            info:[
                '球机 高码流（主码流）RTSP地址：rtsp://admin:admin@192.168.1.64/1/1080p','球机 低码流（子码流）RTSP地址：rtsp://admin:admin@192.168.1.64/1/D1',
                '半球和枪机 单播：高码流（主码流）RTSP地址：rtsp://192.168.1.64:554/1/h264major','半球和枪机 单播： 低码流（子码流）RTSP地址：rtsp://192.168.1.64:554/1/h264minor',
                '半球和枪机 组播： 高码流（主码流）RTSP地址：rtsp://192.168.1.64:554/1/h264major/multicast','半球和枪机 组播： 高码流（主码流）RTSP地址：rtsp://192.168.1.64:554/1/h264major/multicast'
            ],
            "status": 1 ,

        },
        {
            "id": 14,
            "title": "三星",
            info:[
                '单播： 高码流rtsp地址：rtsp://admin:admin001@192.168.1.64:554/onvif/profile2/media.smp（720P）','单播： 低码率rtsp地址：rtsp://admin:admin001@192.168.1.64:554/onvif/profile3/media.smp',
                '组播：高码流rtsp地址：rtsp://admin:admin001@192.168.1.64:554/onvif/multicast/profile2/media.smp','组播：高码流rtsp地址：rtsp://admin:admin001@192.168.1.64:554/onvif/multicast/profile2/media.smp'
            ],
            "status": 1 ,

        },
        {
            "id": 15,
            "title": "LG",
            info:[
                '高码流（主码流）RTSP地址：rtsp://admin:admin@192.168.1.64:554/Master-0','低码流（子码流）RTSP地址：rtsp://admin:admin@1192.168.1.64:554/Slave-0',
            ],
            "status": 1 ,

        },
        {
            "id": 16,
            "title": "Pelco 派尔高",
            info:[
                'RTSP主码流地址为：rtsp://192.168.1.64/h264',
                '第一从码流RTSP地址为：rtsp://192.168.1.64/h264_2',
                '第二从码流RTSP地址为：rtsp://192.168.1.64/h264_3',
                'rtsp://admin:admin@10.232.23.93:554/ 或者rtsp://admin:admin@10.232.23.93/'
            ],
            "status": 1 ,

        },
        {
            "id": 17,
            "title": "安讯士",
            info:[
                '单播：rtsp://root:123456@192.168.1.64/axis-media/media.amp?videocodec=h264&resolution=1280x720&fps=25',
                '组播：rtsp://root:123456@192.168.1.64/onvif-media/media.amp?profile=profile_1_h264&streamtype=multicast'
            ],
            "status": 1 ,

        },
        {
            "id": 18,
            "title": "非凡",
            info:[
                '单播：rtsp://admin:12345@192.168.1.64:554/streaming/channels/101',
            ],
            "status": 1 ,

        },
        {
            "id": 19,
            "title": "金三立",
            info:[
                'rtsp://Admin:111111@192.168.1.64/stream/av0_0',
            ],
            "status": 1 ,

        },
        {
            "id": 20,
            "title": "霍尼韦尔",
            info:[
                'rtsp:/adin: !honeywell1@192.168.41.22/media?stream=1',
                'rtsp://10.10.14.119:554/channel=1_stream=0.sdp?real_stream'
            ],
            "status": 1 ,

        },
        {
            "id": 21,
            "title": "tvt",
            info:[
                'rtsp://username:password@ip:port/profile1',
                'rtsp://admin:123456@10.76.233.47:554/profile1',
            ],
            "status": 1 ,

        },
        {
            "id": 22,
            "title": "博世",
            info:[
                'rtsp://admin:12345@192.168.1.100:554/rtsp_tunnel?h26x=h264&line=1&inst=0',
            ],
            "status": 1 ,

        },
        {
            "id": 23,
            "title": "蓝星录像机",
            info:[
                'rtsp://admin：123456@192.168.88.226：554/Channel001_Stream000_Token',
            ],
            "status": 1 ,

        },
        {
            "id": 24,
            "title": "帝防模拟录像机",
            info:[
                'rtsp://admin:888888@192.168.1.18:554/h264/ch5/main/av_stream',
            ],
            "status": 2 ,

        },
        {
            "id": 25,
            "title": "webcam",
            info:[
                'rtsp://admin:123456@10.232.78.57:554/profile1',
            ],
            "status": 1 ,

        },
        {
            "id": 26,
            "title": "中威",
            info:[
                'rtsp://admin:abcd1234@10.141.231.183:554/Stream/Live/102',
            ],
            "status": 1 ,
        },
        {
            "id": 27,
            "title": "博士/Bosch",
            info:[
                'rtsp://192.168.0.1/rtsp_tunnel',
                'rtsp://192.168.0.1/video',
                'rtsp://192.168.0.1/?inst=2',
            ],
            "status": 1 ,
        },
        {
            "id": 28,
            "title": "金砖通讯/Brickcom",
            info:[
                'rtsp://192.168.1.1/channel1',
            ],
            "status": 1 ,
        },
        
    ]

        new Vue({
            // 挂载点 #app
            el: '#app',
            // 实例数据对象
            data: {

                sxtarr: sxtarr,
                selectdata: [],
                selectitem:'',
                inputval:'',
                selectarr: [
                    {
                        key: 1,
                        value: '数字'
                    },
                    {
                        key: 2,
                        value: '模拟'
                    }
                ]
            },
            methods: {
                
            },
            mounted() {
                this.selectdata = this.sxtarr;
            },
            watch: {
                selectitem: function (newval) {
                    console.log(newval);
                    if (newval) {
                        this.selectdata = Object.assign([], this.sxtarr).filter(item => item.status == newval)
                    } else {
                        this.selectdata = this.sxtarr
                    }
                },
                inputval(newval){
                    if(newval){
                        this.selectdata = Object.assign([], this.sxtarr).filter(item => item.title.indexOf(newval) > -1)
                    }else{
                        this.selectdata = this.sxtarr
                    }
                }

            }
        });
    </script>
</body>

</html>